<template>
    <div class="bank">
        <head-top></head-top>
        <!-- 标题前端 -->
        <div class="kuang">
            <el-tag class="tag">前端</el-tag>
            <div class="botton">
                <el-button type="text" id="text" @click="open()">选择题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">判断题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">填空题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">简答题</el-button>
            </div>
            <div class="botton2">
                <el-button type="text" id="text">编程题</el-button>
            </div>
            <div class="botton3">
                <el-button type="text" id="text">设计题</el-button>
            </div>

        </div>
        <!-- 标题后端 -->
        <div class="kuang">
            <el-tag class="tag">后端</el-tag>
            <div class="botton">
                <el-button type="text" id="text">选择题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">判断题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">填空题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">简答题</el-button>
            </div>
            <div class="botton2">
                <el-button type="text" id="text">编程题</el-button>
            </div>
            <div class="botton3">
                <el-button type="text" id="text">设计题</el-button>
            </div>

        </div>
        <!-- 标题大数据 -->
        <div class="kuang">
            <el-tag class="tag">大数据</el-tag>
            <div class="botton">
                <el-button type="text" id="text">选择题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">判断题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">填空题</el-button>
            </div>
            <div class="botton1">
                <el-button type="text" id="text">简答题</el-button>
            </div>
            <div class="botton2">
                <el-button type="text" id="text">编程题</el-button>
            </div>
            <div class="botton3">
                <el-button type="text" id="text">设计题</el-button>
            </div>
        </div>

        <!-- 隐藏的页面 -->
        <!-- <el-dialog title="答题页面" class="hide" v-model="hide">
            <el-form :model="selectTable">
                <el-input type="textarea" :rows="2" placeholder="请输入习题题目" v-model="textarea">
                </el-input>
                <el-input type="textarea" :rows="2" placeholder="请输入习题答案" v-model="textarea" class="row">
                </el-input>
                <el-form-item label="习题题型" label-width="100px" class="xitixing">
                    <el-select v-model="selectTable.kind" placeholder="请选择题型">
                        <el-option label="选择题" value="1"></el-option>
                        <el-option label="填空题" value="2"></el-option>
                        <el-option label="判断题" value="3"></el-option>
                        <el-option label="简答题" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="hide = false">取 消</el-button>
                <el-button type="primary" @click="updateShop">确 定</el-button>
            </div>
        </el-dialog> -->
    </div>
</template>
<script>
import headTop from '../../components/headTop.vue'

export default {
    data() {
        return {
            // hide: false,
            selectTable:{},
            textarea:'',

        };
    },
    components: {
        headTop,
    },
    methods: {
        // open() {
        //     this.hide = true;
        // },
        updateShop(){},
    }
}
</script>
<style>
.kuang {
    height: 280px;
}

.tag {
    margin-top: 30px;
    font-size: 20px;
    margin-left: 10px;
    display: block;
    background-color: aliceblue;
    width: 50px;
    color: black;
}

.botton {
    background-color: pink;
    width: 220px;
    height: 100px;
    border-radius: 30px;
    margin: 20px 30px 20px 90px;
    float: left;
}

.botton1 {
    background-color: pink;
    width: 220px;
    height: 100px;
    border-radius: 30px;
    margin: 20px 30px 20px 0;
    float: left;
}

.botton2 {
    background-color: pink;
    width: 220px;
    height: 100px;
    border-radius: 30px;
    margin: 0 0 10px 90px;
    float: left;
}

.botton3 {
    background-color: pink;
    width: 220px;
    height: 100px;
    border-radius: 30px;
    margin: 0 0 10px 30px;
    float: left;
}

#text {
    font-size: 25px;
    width: 100px;
    display: block;
    margin: 0 auto;
    line-height: 80px;
    color: black;
}

.hide {
    width: 1200px;
    height: 800px;
    background-color: beige;
}
</style>